<script lang="ts" setup>
  import { Gtable } from '../../../component';
  import { GTree, GDetail, Glayout } from '../../../component';
  import { reactive, ref, onMounted, watch } from 'vue';
  import { Page } from '@vben/common-ui';
  import { getPageList } from '#/api';
  import { ColPage } from '@vben/common-ui';
  import { message, Input, Tabs, TabPane } from 'ant-design-vue';
  import { getAllTree } from '#/api';
  import { Card } from 'ant-design-vue';
  import { IconPicker } from '@vben/common-ui';
  import TypeFiled from './typeFiled.vue';
  import AttrGroup from './attrGroup.vue';
  import ActionMenu from './actionMenu.vue';

  const typeName = ref('com.gumo.feat.BaseObject');
  const typePid = ref<string>('PR:com.gumo.entity.Type:1');
  const queryData = ref<any>([{
    attr: "type_id",
    condition: "EQ",
    value: 1
  }]);
  const treeData = ref<any[]>([]);
  const keyData = ref<Map<string, object>>(new Map<string, object>);
  const activeKey = ref('1');

  const props = reactive({
    leftCollapsedWidth: 5,
    leftCollapsible: true,
    leftMaxWidth: 50,
    leftMinWidth: 5,
    leftWidth: 15,
    resizable: true,
    rightWidth: 70,
    splitHandle: true,
    splitLine: true,
  });

  const leftMinWidth = ref(props.leftMinWidth || 10);
  const leftMaxWidth = ref(props.leftMaxWidth || 100);

  const select = (selectedKeys, e: { selected: boolean, selectedNodes, node, event }) => {
    console.log("dsds",e.node.typeName)
    if (selectedKeys.length > 0) {
      typePid.value = selectedKeys[0];
      typeName.value = e.node.typeName;
      queryData.value = [{
        attr: "type_id",
        condition: "EQ",
        value: selectedKeys[0].split(':').pop()
      }];
    }
  };

  const loadTypeTree = async () => {
    const res = await getAllTree({ className: "com.gumo.entity.Type" });
    typePid.value = res[0].pid;
    const anies = transformMenuData(res);
    treeData.value = anies;
  };

  const transformMenuData = (menuList: any[]): any[] => {
    return menuList.map(item => {
      const transformedItem = {
        typeName: item.typeName,
        title: item.name,
        key: item.pid,
        children: item.children ? transformMenuData(item.children) : [],
      };
      keyData.value.set(item.pid, item);
      return transformedItem;
    });
  };

  const tabsConfig = [
    {
      key: '1',
      icon: 'carbon--data-base',
      label: '基本信息',
      component: GDetail,
      props: { pid: typePid, className: "com.gumo.entity.Type" }
    },
    {
      key: '2',
      icon: 'mdi--focus-field',
      label: '类型属性',
      component: TypeFiled,
      props: { queryData }
    },
    {
      key: '3',
      icon: 'fa-solid--key',
      label: '属性组',
      component: AttrGroup,
      props: { queryData }
    },
    {
      key: '4',
      icon: 'tabler--layout-dashboard-filled',
      label: '布局',
      component: Glayout,
      props: { typePid:typePid, className: typeName }
    },
    {
      key: '5',
      icon: 'typcn--th-menu',
      label: '操作菜单',
      component: ActionMenu,
      props: { queryData }
    }
  ];
  onMounted(() => {
    loadTypeTree();
  });
</script>

<template>
  <ColPage auto-content-height v-bind="props">
    sdfsdf
    <IconPicker prefix='carbon'/>
    <template #left="{ isCollapsed, expand }">
      <div :style="{ minWidth: '200px' }" class="relative h-full border-border bg-card mr-2 rounded-[var(--radius)] border p-2">
        <GTree :treeData="treeData" style="padding-top: 0px" :select="select" :keyData="keyData" />
      </div>
    </template>
    <Card class="ml-2 relative h-full">
      <Tabs v-model:activeKey="activeKey">
        <TabPane v-for="tab in tabsConfig" :key="tab.key">
          <template #tab>
            <a style="display: inline-flex; align-items: center">
              <span :class="`icon-[${tab.icon}]`" style="margin-right: 5px;"></span>
              {{ tab.label }}
            </a>
          </template>
          <!-- 使用 v-if 确保只有当前激活的 Tab 对应的组件会被渲染 -->
          <KeepAlive>
            <component
              v-if="activeKey === tab.key"
              :is="tab.component"
              v-bind="tab.props"
              :key="typePid"
            />
          </KeepAlive>
        </TabPane>
      </Tabs>
    </Card>
  </ColPage>
</template>
